<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="400" title="地址黑名单">
        <div>
            <Tag v-for="item in lists" :key="item.id" :name="item.address" closable @on-close="handleClose(item.id)">
                {{item.address}}
            </Tag>
            <Poptip transfer title="添加地址" :width="300">
                <Button size="small">添加地址</Button>
                <template slot="content">
                    <Form :model="data" :label-width="0">
                        <FormItem prop="value">
                            <Input v-model="data.address"/>
                        </FormItem>
                        <FormItem>
                            <Button type="info" long @click="handleAdd">添加地址</Button>
                        </FormItem>
                    </Form>
                </template>
            </Poptip>
        </div>
        <div slot="footer">
            <Button type="warning" icon="md-log-out" @click="defaultValue = false;">返回</Button>
        </div>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IDrawer from "../../../components/content/drawer";
    import IContent from "../../../components/content/index";

    export default {
        name: "IBlacklist",
        mixins: [contentDrawer],
        components: {IContent, IForm, IDrawer},
        data() {
            return {
                data: {
                    address: ''
                },
                lists: [],
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                this.loading = true;
                this.$http.get(`system/${this.props.id}/express_blacklist`).then((res) => {
                    this.lists = res;
                }).finally(() => {
                    this.loading = false;
                    this.data.address = '';
                });
            },
            handleClose(id) {
                this.$http.delete(`system/${this.props.id}/express_blacklist/${id}`).then((res) => {
                    this.getData();
                }).finally(() => {
                    this.loading = false;
                });
            },
            handleAdd() {
                this.loading = true;
                this.$http.post(`system/${this.props.id}/express_blacklist`, this.data).then((res) => {
                    this.getData();
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>